<script setup lang="ts">
import { log } from 'console';
import { number } from 'echarts';
import { onMounted, nextTick, ref, reactive, watch, toRefs ,computed} from 'vue'
import type { Ref } from "vue"

// const aaa="2222"

// const str = ref("wwww")
// const str1: string = "adf",
//   num: number = 2.34,
//   isBtn: boolean = true,
//   arr: any[] = []
// let obj: { name: string, age?: number }
// obj = { name: "wssss" }

// const str2: any = "wadsad"
// console.log((<string>str2).length);

// const getNull = (person: string): string => {
//   return person + "你好"
// }
// console.log(getNull("傻逼"));

// // 《约束》
// interface typeStr {
//   label?: string,
//   age?: any,
//   [propName :string]:any
// }
// const printSome = (labelValue: typeStr): string | undefined => {
//   console.log(labelValue.label);
//   return labelValue.label
// }

// console.log(printSome({ label: "sml" }));

// const addSome = (labelValue: typeStr): { l: string, a: any } => {
//   let value: { l: string, a: number } = { l: "nh", a: 16 }
//   if (labelValue.label) value.l = labelValue.label
//   if (labelValue.age) value.a = labelValue.age
//   return value
// }

// console.log(addSome({ label: "sml" }));

// let refValue=ref("refV")
// console.log(refValue.value);

// let strObj={
//   label:"22",
//   aaa:"222"
// }

// interface myFunc{
//   (str:string,age:number):number
// }

// const myFunc1:myFunc=()=>{
//   return 222
// }

// console.log(myFunc1("222",111));


class Animal {
  move(dis: number) {
    console.log(`移动了${dis}`);
  }
}

class Dog extends Animal {
  dark(): void {
    console.log("aaaa");

  }
}

const dog = new Dog()
dog.dark()
dog.move(10)
dog.dark()

const myFunc2 = (str: string, age?: number): string => {
  console.log(typeof (str + age));
  return str + age
}

myFunc2("we", 34)


const myFunc3 = <T>(str: T): T => {
  return str
}
console.log(myFunc3("nnn"));


class MinClass {
  list: number[]
  constructor(num: number) {
    this.list = [num]
  }
  add(num: number) {
    this.list.push(num)
  }
  getMinMax() {
    let max: number = Math.max(...this.list),
      min: number = Math.min(...this.list)
    return { min, max }
  }
}

let mC = new MinClass(1)
mC.add(232)
mC.add(5)
console.log(mC.getMinMax());

const defaultFun = (str: string = "nhh", num?: number): string => {
  return str + num
}

console.log(defaultFun());

function getInfo(value: string): string;

function getInfo(value: number): number;

function getInfo(value: any): any {
  if (typeof value == "string") {
    return "im" + value
  } else {
    return "my age" + value
  }
}


// const getInfo=(value:any):any=>{
//   if(typeof value=="string"){
//     return "im"+value
//   }else{
//     return "my age"+value
//   }
// }

interface UnserInfo {
  username: string
  age?: number
  setUsername(username: string): void
  getUsername(): string
}

let userInfo: UnserInfo = reactive({
  username: "123",
  setUsername(username: string): void {
    this.username = username
  },
  getUsername(): string {
    return this.username
  }
})
let userName = ref("")

let testRef = ref({
  a: 1
})
let testReactive = reactive({
  a: 2
})

console.log(testRef, testReactive);

const { name, age = 100 } = defineProps<{
  name: string
  age?: number
}>()

const year: Ref<number | string> = ref("2022")
console.log(year.value);
year.value = 2011
console.log(year.value);


const lastYear = computed<number | string>(() => {
  return year.value
})

 

</script>

<template>
  <div>
    <div id="contain1"
      style="height: 100px;width: 100px;background-color: aqua;display: flex;justify-content: center;align-items: center;">
      <button>222</button>
    </div>
    <div id="grid">
      <div class="gridItem">1</div>
      <div class="gridItem">2</div>
      <div class="gridItem">3</div>
      <div class="gridItem">4</div>
      <div class="gridItem">5</div>
      <div class="gridItem">6</div>
    </div>
    <h1>2323232</h1>
    <h1>{{ userInfo.getUsername() }}</h1>
    <el-input v-model="userName" placeholder="" size="normal" clearable @change=""></el-input>
    <button @click="userInfo.setUsername(userName)">change</button>

    
  </div>
</template>

<style lang='less'>
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition: border-color 0.25s;

  &:hover {
    border-color: #646cff;
  }

  &:active {
    background-color: rgb(204, 219, 214);
  }

  // &:focus-visible{
  //   background-color: #d3c8c8;
  // }

}

#grid {
  height: 700px;
  width: 450px;
  background-color: #646cff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // align-items: center;
  align-content: center;

  .gridItem {
    background-color: bisque;
    height: 100px;
    width: 100px;
  }
}
</style>